<template>
  <div id="page-myOrder">
    <!-- 顶部 -->
    <topHeader :show-left="true" title="我的订单"></topHeader>

    <!-- 导航 -->
    <tab :line-width="2" bar-active-color="#FEAC32" custom-bar-width="30px">
      <tab-item
        v-for="(item, index) in listArr"
        :key="index"
        :selected="curChoose == index"
        @on-item-click="changeType(index)"
        >{{ item }}</tab-item
      >
    </tab>
    
    <template v-for='(item, index) in listArr'>
      <div  v-show="curChoose == index" :key="'scroll'+index"> 
        
        <!-- 由于后端订单列表未分页，则取消上拉加载 的功能，如果想启用，则可以按下面的办法使用 -->
        <!-- 订单列表  如果需要上拉加载，则把scroller 注释取消掉，然后再把下面的 template内容 删掉。然后在上面的 div 中加上 class="scrollBox"-->
        <!-- <scroller
          :use-pullup='allData[index].length >= 20'
          height="100%"
          v-model="scrollerStatus[index]"
          :lock-x="true"
          :scroll-bottom-offset="60"
          :pullup-config="upConfig"
          @on-pullup-loading="loadMoreData(index)"
          :ref="'myScroller'+index"
          v-if='allData[index].length > 0'
        >
          <div> -->
            <!-- 列表组件 -->
            <!-- <list-item v-model="allData" :cur-type='index'/> -->
            <!-- 没数据了提示 -->
            <!-- <div class="divder" v-if='(index == 0 && allData[index].length < 40) || allData[index].length < 20'>
              <p class="diver-line"></p>        
              <p class="diver-txt">已经到底了</p>
              <p class="diver-line"></p>
            </div>
          </div>
        </scroller> -->

        <!-- 订单列表 -->
        <template v-if='allData[index].length > 0'>
          <list-item v-model="allData" :cur-type='index'/>
              <!-- 没数据了提示 -->
          <div class="divder">
            <p class="diver-line"></p>        
            <p class="diver-txt">已经到底了</p>
            <p class="diver-line"></p>
          </div>
        </template>
        <!-- 没有订单 -->
        <div class="no-order" v-else>
          <img src="static/image/orderInfo/i_noorder.png" alt="" />
          <p>暂无任何订单</p>
        </div>
      </div>
    </template>    
  </div>
</template>

<script>
import topHeader from "@/components/topHeader";
import listItem from "./listItem";
import { Tab, TabItem, Scroller } from "vux";

export default {
  props: [],
  components: {
    topHeader,
    Tab,
    TabItem,
    listItem,
    Scroller
  },
  data: function() {
    return {
      //上拉配置项
      upConfig: {
        content:'上拉加载更多',
        loadingContent: "努力加载中...",
        downContent: "释放后加载↓",
        upContent: "上拉加载更多↑"
      },
      //3个scroller滚动的状态值，不要试着把 0，1，2 修改成其他的
      scrollerStatus: {
        0:{
          pullupStatus: "default",
          pulldownStatus: "default"
        },
        1:{
          pullupStatus: "default",
          pulldownStatus: "default"
        },
        2:{
          pullupStatus: "default",
          pulldownStatus: "default"
        }
      },
      //是否正在请求数据。不要试着把 0，1，2 修改成其他的
      isOnFetch:{
        0:false,
        1:false,
        2:false
      },
      curChoose: 0, //当前默认选择全部
      listArr: ["全部", "测算", "咨询"],
      //三个tab的数据需要放到这个里面。不要试着把 0，1，2 修改成其他的
      allData:{
        0:[],
        1:[],
        2:[]
      }
    };
  },
  created: function() {
    this.getOrderList();
    this.$store.commit('changePageLoading',true);
  },
  // 如果路由进入前，是从orderInfo页面返回来的，那么就设置当前我的订单页缓存，否则不缓存
  beforeRouteEnter(to, from, next) {
    if(from.path == '/orderInfo'){
      to.meta.keepAlive = true;
    }else{
      to.meta.keepAlive = false;
    }
    next();
  },
  methods: {
    getOrderList:function(){
      let uid = this.$store.state.userID || '869115037298615,869115037349111'; 
      //全部
      this.$fetch.post('/app/Jmyc/order_list',{
        uid:uid,
        type_id:1
      })
      .then((res)=>{
        this.$store.commit('changePageLoading',false);

        if(res.code == 200 ){
          let csArr = res.data.cs_list;
          let qsArr = res.data.qs_list;        
          
          this.allData[0] = csArr.concat(qsArr);
          this.allData[1] = csArr;
          this.allData[2] = qsArr;
        }        
      });
    },
    changeType: function(idx) {
      this.curChoose = idx;
    },   
    //上拉加载更多
    loadMoreData: function(idx) {
      if(this.isOnFetch[idx]){
        return;
      }
      this.isOnFetch[idx] = true;
      // 模拟异步返回数据
      setTimeout(() => {
        this.isOnFetch[idx] = false;
        let newData = { 
          status: 1,
        }

        if(idx > 0){
          this.allData[idx].push(newData);
        }
        
        this.allData[0].push(newData);
        
        this.$vux.toast.show({
          text: "加载成功",
          type: "text",
          position: "top"
        });

        this.$nextTick(() => {
          this.$refs['myScroller'+idx][0].donePullup(); //完成上拉加载
          this.$refs['myScroller'+idx][0].reset(); //重新渲染
          this.scrollerStatus[idx].pullupStatus = "default"; //防止只加载一次。

          this.$refs['myScroller'+idx][0].disablePullup(); //禁止上拉加载，用于无数据的情况        
        })
      }, 2000);     
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../assets/css/public.less";
@import "../../assets/css/tml_base.less";
@import "./index.less";
</style>